<script setup lang="ts">
definePageMeta({
    layout: 'login'
})

import { MessagePlugin } from 'tdesign-vue-next';
import { useAuth } from '../../store/auth';
import { register } from '../../utils/api';
const authStore = useAuth();
const router = useRouter();

useSeoMeta({
    title: '用户注册'
})

onMounted(() => {
    authStore.setIsRegisterPageFlag(true);
})

// 表单数据
const formData = reactive({
    phone: '',
    username: '',
    password: '',
    repassword: ''
})



// 充值表单
const onReset = () => { }
// 提交表单
const onSubmit = async () => {
    register(formData).then((res) => {
        if (res.success) {
            MessagePlugin.success({
                content: res.message
            })
            router.push('/user/login');
        }
        return;

    }).catch((err) => {
        MessagePlugin.error({
            content: err.message
        });
        return;
    })
}
</script>

<template>
    <div>
        <div class="login-form">
            <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">
                <t-form-item name="phone">
                    <t-input v-model="formData.phone" clearable size="large" placeholder="请输入手机号码">
                        <template #prefix-icon>
                            <t-icon name="mobile" />
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item name="username">
                    <t-input v-model="formData.username" clearable size="large" placeholder="请输入用户昵称">

                        <template #prefix-icon>
                            <t-icon name="user-1" />
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item name="password">
                    <t-input v-model="formData.password" type="password" clearable size="large" placeholder="请输入密码">

                        <template #prefix-icon>
                            <t-icon name="lock-on" />
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item name="repassword">
                    <t-input v-model="formData.repassword" type="password" clearable size="large" placeholder="请再次输入密码">

                        <template #prefix-icon>
                            <t-icon name="lock-on" />
                        </template>
                    </t-input>
                </t-form-item>

                <t-form-item>
                    <t-button theme="primary" type="submit" block size="large">注册</t-button>
                </t-form-item>
            </t-form>
        </div>
    </div>
</template>

<style></style>